
// @import url(./ol-overlay.less);
#olContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
// 椭圆波纹
.ripple {
  position: absolute;
  background: transparent;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 10px;
  border-radius: 50%;

  .pulse1,
  .pulse2,
  .pulse3 {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%/50%;
    transform: translate(-50%, -50%);
    animation: ripple 3s 2 ease-in-out;
    box-shadow: 0 0 0 2px white;
    width: 0px;
    height: 0px;
    opacity: 0;
  }

  .pulse1 {
    animation-delay: 0s;
  }

  .pulse2 {
    animation-delay: 1s;
  }

  .pulse3 {
    animation-delay: 2s;
  }
}

@keyframes ripple {
  0% {
    width: 0px;
    height: 0px;
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  100% {
    width: 40px;
    height: 20px;
    opacity: 0;
  }
}

// 圆形波纹
.ripple-circle {
  position: absolute;
  background: transparent;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 10px;
  border-radius: 50%;

  .pulse1,
  .pulse2,
  .pulse3 {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%/50%;
    transform: translate(-50%, -50%);
    animation: rippleCircle 3s 2 ease-in-out forwards;
    box-shadow: 0 0 0 2px white;
    width: 0px;
    height: 0px;
  }

  .pulse1 {
    animation-delay: 0s;
  }

  .pulse2 {
    animation-delay: 1s;
  }

  .pulse3 {
    animation-delay: 2s;
  }
}

@keyframes rippleCircle {
  0% {
    width: 20px;
    height: 20px;
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  100% {
    width: 40px;
    height: 40px;
    opacity: 0;
  }
}

//
.ol-popup-ripple,
.ol-popup-surface {
  position: absolute;
  padding: 6px 10px;
  border-radius: 5px;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;

  p {
    line-height: 1;
    margin-bottom: 0;
    color: white;
    font-size: 12px;
    word-break: keep-all;
  }

  &:before {
    content: " ";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    height: 0;
    width: 0;
    border: solid transparent;
    border-width: 5px;
    pointer-events: none;
  }
}

.ol-popup-ripple {
  // animation: surface 1s ease-in-out 1s 1 forwards, upAndDown 1s ease-in-out 2s infinite;
  animation: surface 1s ease-in-out 1s 1 forwards;
  background-color: #62c122;
  border: 1px solid rgba(255, 255, 255, 1);

  &:before {
    border-top-color: white;
  }

  &:after {
    content: " ";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    margin-top: -2px;
    height: 0;
    width: 0;
    border: solid transparent;
    border-width: 6px;
    pointer-events: none;
    border-top-color: #62c122;
  }
}

.ol-popup-surface {
  animation: surface 1s ease-in-out 1s 1 forwards;
  background-color: #14e911;

  p {
    color: #232323;
    font-weight: bold;
  }

  &:before {
    border-top-color: #14e911;
  }
}

.threatenedSituation1 {
  background-color: rgba(219, 82, 82, 1);
  &:before {
    border-top-color: rgba(219, 82, 82, 1);
  }
}
.threatenedSituation2 {
  background-color: rgba(217, 154, 32, 1);
  &:before {
    border-top-color: rgba(217, 154, 32, 1);
  }
}
.threatenedSituation3 {
  background-color: rgba(185, 216, 76, 1);
  &:before {
    border-top-color: rgba(185, 216, 76, 1);
  }
}
.threatenedSituation4 {
  background-color: rgba(101, 123, 220, 1);
  &:before {
    border-top-color: rgba(101, 123, 220, 1);
  }
}
.threatenedSituation5 {
  background-color: rgba(116, 127, 142, 1);
  // color: #000 !important;
  &:before {
    border-top-color: rgba(116, 127, 142, 1);
    // color: #000 !important;
  }
}

@keyframes upAndDown {
  0% {
    bottom: 5px;
  }

  100% {
    bottom: 10px;
  }
}

@keyframes surface {
  0% {
    bottom: -20px;
    opacity: 0;
  }

  100% {
    bottom: 5px;
    opacity: 1;
  }
}

.map-tooltip {
  user-select: none;
  width: 130px !important;
  word-wrap: break-word;
  position: absolute;
  border: 1px solid #7eabcd;
  background-color: white;
  padding: 5px;
  font-size: 9pt;
  z-index: 9999;
  border-radius: 4px;
  border: 1px solid red !important;
  opacity: 1;
}

.del-polygon {
  width: 20px;
  height: 20px;
  // background: center/ 100% 100% url('../mapimg/overlay/del-polygon.png');
  background: center/ 100% 100%
    url("../mapimg/overlay/del-polygon.png");
  // padding: 2px 4px;
  // border-radius: 2px;
  // background-color: red;
  user-select: none;

  &:hover {
    cursor: pointer;
    background-image: url("../mapimg/overlay/del-polygon-hover.png");
  }
}
.colour {
  width: 20px;
  height: 20px;
  background: center/ 100% 100% url("../mapimg/manage/colour.png");
  user-select: none;

  &:hover {
    cursor: pointer;
    background-image: url("../mapimg/manage/colour.png");
  }
}

.tooltip-pick {
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  color: white;
  padding: 4px 8px;
  //   opacity: 0.7;
  white-space: nowrap;
  background-color: #ffcc33;
  color: black;
  border: 1px solid white;
}





.ol-overlaycontainer-stopevent{
  z-index: 99 !important;
}